<template>
    <view class="list-item" @click="goDetail(item)">
        <view class="i-head">
            <image src="/static/img/erp/icon_sp_report.png" class="icon"></image>
            <view class="info">
                <view class="name">{{ item.PName }}</view>
                <view class="code">编码：{{ item.PCode }}</view>
            </view>
        </view>
        <view class="i-con">
            <view class="i-c-item">
                <view class="num">{{ item.Qty }}</view>
                <view class="unit">库存余量</view>
                <view class="line"></view>
            </view>
            <view class="i-c-item">
                <view class="num">{{ item.Total }}</view>
                <view class="unit">余量成本</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    components: {},
    props: {
        item: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {}
    },
    mounted() {},
    onShow() {},
    methods: {
        goDetail(item) {
            this.easyGoTo("/pages_erpA8/stock/goods-detail?data=" + encodeURIComponent(JSON.stringify(item)))
        },
    },
}
</script>

<style lang="scss">
.list-item {
    background: $color-white;
    padding: 28rpx 16rpx;
    margin-bottom: 24rpx;
    border-radius: 12px;
    .i-head {
        display: flex;
        justify-content: space-between;
        margin-bottom: 32rpx;
        .icon {
            display: inline-flex;
            width: 20px;
            height: 20px;
            margin-right: 4rpx;
        }
        .info {
            flex: 1;
            .name {
                font-size: $size-28;
                font-weight: bold;
                padding-bottom: 12rpx;
            }
            .code {
                font-size: $size-28;
                color: $color-gray-3;
            }
        }
    }
    .i-con {
        display: flex;
        align-items: center;
        .i-c-item {
            box-sizing: border-box;
            position: relative;
            display: flex;
            width: 50%;
            padding: 0 8rpx;
            flex-flow: column;
            align-items: center;
            .num {
                font-size: $size-32;
                word-break: break-all;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
            }
            .unit {
                font-size: $size-22;
                color: $color-gray-3;
            }
            .line {
                position: absolute;
                top: 16rpx;
                right: 0;
                width: 1px;
                height: 48rpx;
                background: #ebebeb;
            }
        }
    }
}
.c-yellow {
    color: $color-yellow-1;
}
</style>
